<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  body {
    font: 14px/1.2 "微软雅黑";
  }

  div {
    width: 300px;
    position: relative;
    margin: 20px 0;
    padding: 5px 10px;
  }

  .form_control {
    border: 1px #ccc solid;
  }

  input[type="text"],
  input[type="password"] {
    border: none;
    width: 100%;
  }

  .form_control.active {
    border: 1px #32BC61 solid;
    background-color: #fff;
  }

  .form_control.error {
    border: 1px #f00 solid;
    background-color: #FBF9BB;
  }

  .form_control.error input[type="text"],
  .form_control.error input[type="password"] {
    background-color: #FBF9BB;
    color: #f00;
  }

  input[type="text"]:focus,
  input[type="password"]:focus {
    border: none;
    outline: none;
  }

  .form_control .valid_message {
    color: #32BC61;
    position: absolute;
    left: 325px;
    top: 5px;
    width: 200px;
  }

  .form_control.error .valid_message {
    color: #f00;
  }

  .form_control.success .valid_message {
    background: url(sucess.png) no-repeat;
    left: auto;
    right: 5px;
    top: 4px;
    width: 16px;
    height: 16px;
  }

  .none {
    display: none;
  }
  </style>
</head>

<body>
  <form>
    <div class="form_control">
      <input class="required" value="315359131@qq.com" type="text" name="email" data-tip="请输入您的邮箱" data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确">
    </div>
    <div class="form_control">
      <input class="required" value="123456789" type="password" data-tip="请输入您的密码" data-valid="isNonEmpty||between:6-16" data-error="密码不能为空||密码长度6-16位" name="nickname">
    </div>
    <div class="form_control">
      <input class="required" value="王大锤" type="text" name="email" data-tip="请输入您的姓名" data-valid="isNonEmpty||onlyZh||between:2-5" data-error="姓名不能为空||姓名只能为中文||姓名长度为2-5位">
    </div>
    <div class="form_control">
      <span class="required" data-valid="isChecked" data-error="性别必选" data-type="radio">
          <label><input type="radio" name="sex">男</label>
          <label><input type="radio" name="sex">女</label>
          <label><input type="radio" name="sex">未知</label>
      </span>
    </div>
    <div class="form_control">
      <span class="required" data-valid="isChecked" data-error="标签至少选择一项" data-type="checkbox">
          <label><input type="checkbox" name="label">红</label>
          <label><input type="checkbox" name="label">绿</label>
          <label><input type="checkbox" name="label">蓝</label>
      </span>
    </div>
    <div class="form_control">
      <select class="required" data-valid="isNonEmpty" data-error="省份必填">
        <option value="">请选择省份</option>
        <option value="001">001</option>
        <option value="002">002</option>
        <option value="003">003</option>
        <option value="004">004</option>
        <option value="005">005</option>
        <option value="006">006</option>
        <option value="007">007</option>
        <option value="008">008</option>
        <option value="009">009</option>
        <option value="010">010</option>
      </select>
    </div>
    <div>
      <input type="submit" value="提交">
    </div>
  </form>
  <script type="text/javascript" src="jquery-1.11.1.js"></script>
  <script type="text/javascript" src="jquery-validate.js"></script>
  <script type="text/javascript">
  $('form').validate({
    onFocus: function() {
      this.parent().addClass('active');
      return false;
    },
    onBlur: function() {
      var $parent = this.parent();
      var _status = parseInt(this.attr('data-status'));
      $parent.removeClass('active');
      if (!_status) {
        $parent.addClass('error');
      }
      return false;
    }
  });

  $('form').on('submit', function(event) {
    event.preventDefault();
    $(this).validate('submitValidate'); //return boolean;
  });
  </script>
</body>

</html>
